<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link href="__PUBLIC__/css/mui.min.css" rel="stylesheet" />
	<script type="text/javascript" src="__PUBLIC__/js/mui.min.js"></script>
    <style type="text/css">
        .demo{
            margin-top: 15%
        }
        .worng{
            color: #FF0000;
            border: 3px #FF0000 solid;
        }
        .tijiao{
            /*position: absolute;*/
            margin-left: 20%;
            width: 50%;
            height: 23%;
            /*z-index: 1;*/
            /*top: 30%;*/
        }
        .tijiao img{
            /*margin-left: 20%;*/
            width: 100%;
            /*height: 25%;*/
            /*z-index: 1;*/
            /*top: 55%;*/
        }
    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title" id="head">登录</h1>
    </header>
    <div class="mui-card">
        <div class="demo">
            <div class="mui-card-header"><h4>请按要求填写</h4></div>
            <form class="" id="myform" onsubmit="return validate();">
                <div class="mui-input-row" id="divcard">
                    <label>身份证：</label>
                    <input id="card" type="text" class="mui-input-clear" placeholder="身份证号码">
                </div>
                <div class="mui-input-row" id="divphone">
                    <label>电&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
                    <input id="phone" type="text" class="mui-input-clear" placeholder="电话号码">
                </div>
            </form>
       </div>
        <div class="mui-button-row">
           <div class="tijiao" id="tijiao"><img id="tijiao_tu" src="__PUBLIC__/image/submitBtn.png"/></div>
        </div>
    </div>

   <script type="text/javascript">
		// 验证手机号码
        function validatePhone(){
            var emailElement = document.getElementById('phone');
            var divphone = document.getElementById('divphone');
            if(/^1[3456789]+(\d{9})$/.test(emailElement.value)){
                mui.toast("输入合格");
                // MsgElement.innerHTML = "√";
                divphone.className = "mui-input-row";
                return true;
            }else{
                mui.toast("请输入合格电话号码");
                divphone.className = "mui-input-row worng";
                // MsgElement.innerHTML = "×";
                return false;
            }
        }

       // 验证身份证
        function validateCard(){
            var objElement = document.getElementById('card');
            var divcard = document.getElementById('divcard');
            // console.log(objElement.value);
            if(objElement.value == ""){ // 输入不为空
                mui.toast("请输入身份证");
                divcard.className = "mui-input-row worng";
                return true;
            }else{
                mui.toast("输入完成");
                divcard.className = "mui-input-row";
                return false;
            }
        }

        document.getElementById("phone").addEventListener("blur",validatePhone,false);
        document.getElementById("card").addEventListener("blur",validateCard,false);

        document.getElementById('tijiao').addEventListener('tap',function(){
            phone = document.getElementById("phone").value;
            card = document.getElementById("card").value;
            if(phone == "" || card == ""){
                alert("请按要求填写信息");
            }else{
                mui.ajax('/answer/public/index.php/login',{
                    data:{
                        userMobile:phone,
                        userIDcard:card
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'post',//HTTP请求类型
                    timeout:10000,//超时时间设置为10秒；
                    success:function(data){
                        // console.log("数据更新成功，写数据");
                        // console.log(data);
                        newData = eval(data);
                        if(eval(data).message == "登录成功"){
                        	alert(eval(data).message);
	                        window.location.href = "/answer/public/index.php/phome";
                            // window.setTimeout("window.location.href = '/answer/public/index.php/pgame'",1000);
                        }else if(eval(data).message == "登录失败"){
                        	alert(eval(data).message);
                        }
                    },
                    error:function(xhr,type,errorThrown){
                        console.log(type);
                    }
                });
            }

        })
   </script>
</body>
</html>
